<template>
  <view>
    <view class="my-userinfo-container">
      <!-- 头像和昵称的区域 -->
      <view class="top-box">
        <image :src="userinfo.avatarUrl" class="avatar"></image>
        <view class="nickname">{{ userinfo.nickName }}</view>
      </view>
      <!-- 面板区域 -->
      <view class="panel-body">
        <view class="panel-item">
          <text>我的收藏</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-item">
          <text>我的足迹</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-item" @click="contact">
          <text>联系客服</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-item" @click="logout">
          <text>退出登录</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  
  props: {
    userinfo: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    ...mapMutations('m_user', ['clearUserInfo']),
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.clearUserInfo();
            uni.$showMsg('已退出登录');
          }
        }
      });
    },
    contact() {
      uni.showModal({
        title: '联系客服',           // 弹窗标题
        content: '客服微信：wxid_iey54bouyq0t22\n\n点击确定复制微信号\n\n复制微信号后，请在微信中添加好友',         // 弹窗内容
        confirmText: '确定',     // 确认按钮文字
        cancelText: '取消',      // 取消按钮文字
        success: (res) => {      // 用户点击按钮后的回调
          if (res.confirm) {
            uni.setClipboardData({
              data: 'wxid_iey54bouyq0t22',
              success: () => {
                uni.showToast({
                  title: '微信号已复制',
                  icon: 'success'
                });
              },
              fail: () => {
                uni.showToast({
                  title: '复制失败',
                  icon: 'none'
                });
              }
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
.my-userinfo-container {
  height: 100%;
  background-color: #F4F4F4;
  
  
  .top-box {
    height: 400rpx;
    background-color: #f7fff2;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0;
    
    .avatar {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 2px solid white;
      box-shadow: 0 1px 5px black;
      background-color: #ddd;
    }
    
    .nickname {
      margin-top: 10px;
      font-size: 20px;
      color: black;
      font-weight: bold;
    }
  }
  
  .panel-body {
    margin: 0 20px;
    position: relative;
    top: -20px;
    background-color: #FFF;
    border-radius: 3px;
    
    .panel-item {
      color: black;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      padding: 0 10px;
      line-height: 45px;
    }
  }

}
</style>